<template>
	<view class="content">
		<view class="goods-detail-page">
			<view class="goods-head">
				<u-swiper :list="imagesList" :autoplay="true" duration="500" interval="5000" height="750rpx" indicator
					@click="showCurImg"></u-swiper>
				<view class="goods-info">
					<view class="goods-number">
						<view class="goods-price">
							<view class="show-price">￥<view>{{ details.showPrice ? details.showPrice : '----' }}</view>起</view>
							<view class="line-price">原价￥<text>{{ details.linePrice }}</text> </view>
						</view>
					</view>
					<view class="goods-title">
						<view class="goods-name">{{ details.name }}</view>
					</view>
					<view class="goods-intro">{{ details.intro }}</view>
				</view>
				<view class="spu-select" @click="onShopVisibleShow">
					<view class="label">规格</view>
					<view class="content">
						<view :class="!selectedAttrStr ? 'tintColor' : ''">
							{{ selectedAttrStr ? buyNum : '' }}{{ selectedAttrStr || '请选择' }}
						</view>
						<u-icon name="arrow-right" size="40rpx" color="#BBBBBB" />
					</view>
				</view>
				<view v-if="commentsList.length > 0" class="comments-wrap">
					<view class="comments-head" @click="navToCommentsListPage">
						<view class="comments-title-wrap">
							<view class="comments-title-label">商品评价</view>
						</view>
						<view class="comments-rate-wrap">
							<u-icon name="arrow-right" size="40rpx" color="#BBBBBB" />
						</view>
					</view>
					<view class="comment-item-wrap" v-for="(item, index) in commentsList" :key="index">
						<view class="comment-item-head">
							<view class="comment-head-right">
								<view class="comment-username">{{ item.userName }}</view>
								<view class="comment-content">{{ item.content }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="desc-content">
				<view class="desc-content__title">
					<image class="img" :src="recLeftImg" />
					<span class="desc-content__title--text">详情介绍</span>
					<image class="img" :src="recRightImg" />
				</view>
				<!-- wx:for="{{details.detail}}" wx:key="index" -->
				<view v-for="(item, index) in detailsList" :key="index">
					<image class="desc-content__img" :src="item" mode="widthFix" lazy-load="true" />
				</view>
			</view>

		</view>
		<view class="goods-bottom-operation" v-show="userId">
			<view class="bottom-operate" v-if="type != 2">
				<view v-for="(item, index) in jumpArray" :key="index" class="icon-warp operate-wrap" @click="toNav(item)">
					<u-icon :name="item.iconName" size="40rpx" :color="item.iconName == 'heart-fill' ? '#EA5F5F' : '#999999'" />
					<view class="operate-text">{{ item.title }}</view>
				</view>
				<view class="operate-btns">
					<view class="bar-separately" @click="addCart1">加入购物车</view>
					<view class="bar-buy" @click="buyItNow1">立即购买</view>
				</view>
			</view>
			<view class="bottom-operate" v-else>
				<view class="operate-separately" @click="addCart1">加入购物车</view>
			</view>
		</view>

		<u-popup :show="visible" @close="visible = false">
			<view class="popup-block">
				<view class="popup-top">
					<view class="popup-top_img">
						<view>
							<image
								:src="product_id == -1 ? details.thumbnail : details.productSpecsDTOList[product_index].specsImages"
								mode="aspectFit|aspectFill|widthFix"
								:data-image="product_id == -1 ? details.thumbnail : details.productSpecsDTOList[product_index].specsImages" />
						</view>
						<view class="popup-top_img_price">
							￥<text>{{ product_id == -1 ? details.showPrice :
                details.productSpecsDTOList[product_index].showPrice }}</text>
						</view>
					</view>
					<u-icon name="close" size="50rpx" color="#333333" @click="visible = false" />
				</view>
				<view class="popup-section">
					<view class="popup-section_specs">
						<view class="popup-section_specs_title"> 规格 </view>
						<view class="popup-section_specs_items">
							<block v-for="(item, index) in details.productSpecsDTOList" :key="index">
								<view v-if="item.stock > 0" class="popup-section_specs_item"
									:class="product_id == item.productSpecsId ? 'specs_actived' : ''"
									@click="onCheckProduct(item, index)">
									{{ item.name }}
								</view>

								<view v-else class="popup-section_specs_item noStock">
									{{ item.name }} <text>缺货</text>
								</view>
							</block>
						</view>
					</view>
					<view class="popup-section_specs_number">
						<view>数量</view>
						<view class="algorithm">
							<view @click="cartChange('minus')">
								<u-icon name="minus" size="30rpx" color="#999" />
							</view>
							<view> {{ number }} </view>
							<view @click="cartChange('plus')">
								<u-icon name="plus" size="30rpx" color="#32B499" />
							</view>
						</view>
					</view>
				</view>

				<block v-if="type != 2">
					<view class="popup-btns">
						<view class="popup_container-btn">
							<view class="add-cart" @click="addCart">加入购物车</view>
							<view @click="buyItNow('立即购买')">立即购买</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="store_popup_container-btn">
						<view class="storeBtn" @click="addCart">加入购物车</view>
					</view>
				</block>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		cdnBase
	} from '@/common/index';
	import {
		getUserInfo
	} from '@/common/auth';

	export default {
		data() {
			return {
				userId: getUserInfo().ypdUser?.userId,
				recLeftImg: `${cdnBase}/common/rec-left.png`,
				recRightImg: `${cdnBase}/common/rec-right.png`,
				details: {},
				jumpArray: [{
						title: '收藏',
						url: '',
						iconName: 'heart',
					},
					{
						title: '购物车',
						url: '/pages/premiumBag/cart/index',
						iconName: 'shopping-cart',
						showCartNum: true,
					},
				],
				isStock: true,
				cartNum: 0,
				soldout: false,
				buttonType: 1,
				buyNum: '',
				navigation: {
					type: 'fraction'
				},
				current: 0,
				autoplay: true,
				duration: 500,
				interval: 5000,
				imagesList: [], //轮播图片
				detailsList: [], //详情页图片
				selectedAttrStr: '', //商品规格
				product_id: -1, //已选择的规格id
				product_index: 0, //已选择的规格下标
				visible: false,
				number: 1,
				commentsList: [], //评价列表
				btnType: 1, //1 加入购物 2 立即购买
				productId: '',
				type: '',
				storeId: '',
			}
		},
		onLoad(option) {
			const {
				productId,
				type = 1,
				storeId = 0
			} = option;
			this.productId = productId
			this.type = type
			this.storeId = storeId
			this.getDetail();
			this.getCommentList(this.productId);
		},
		methods: {
			//获取商品详情
			async getDetail() {
				const {
					productId,
					userId,
					type,
					jumpArray,
					storeId
				} = this;
				const param = {
					productId,
					userId: userId || '',
					storeId
				}
				if (type != 2) {
					delete param.storeId;
				};
				let result = await this.$request.miniProductDetail(param)
				let imglist = [];
				let detailsList = [];
				if (result.data.detail != '' && result.data.detail != null) {
					detailsList = result.data.detail.split(',');
				};
				if (result.data.images != '' && result.data.images != null) {
					imglist = result.data.images.split(',');
				};
				if (result.data.collect == 1) {
					jumpArray[0].iconName = 'heart-fill'
				} else {
					jumpArray[0].iconName = 'heart'
				}
				result.data.showPrice ? result.data.showPrice : 0.00;
				this.details = result.data
				this.imagesList = imglist
				this.jumpArray = jumpArray
				this.detailsList = detailsList
				this.product_id = result.data.productSpecsDTOList && result.data.productSpecsDTOList[0].productSpecsId || 0
			},
			// 图片预览
			showCurImg(index) {
				console.log(index)
				const {
					imagesList
				} = this;
				imagesList.map(item => {
					item = item.replace(/\\/g, '/');
				})
				uni.previewImage({
					current: index,
					urls: imagesList, // 需要预览的图片http链接列表
				});
			},
			//获取评价列表
			async getCommentList(productUpId) {
				const param = {
					page: {
						size: 2,
						current: 1
					},
					query: {
						productUpId,
						level: 5
					}
				};
				let result = await this.$request.miniFindEvaluateByPage(param)
				this.commentsList = result.data.records
			},
			//选择规格弹出框
			onShopVisibleShow() {
				if (!this.userId) return this.$toast('您还未登录,请先去登录!')
				const {
					details,
					product_index
				} = this;
				this.visible = true
				this.number = 1
				this.selectedAttrStr = details.productSpecsDTOList[product_index]?.name || ''
			},
			addCart1() {
				const {
					details,
					product_index
				} = this;
				this.visible = true
				this.btnType = 1
				this.selectedAttrStr = details.productSpecsDTOList[product_index]?.name || ''
			},

			addCart() {
				const {
					product_id,
					type,
					productId,
					number,
					userId,
					details,
					product_index,
					storeId,
					selectedAttrStr
				} = this;
				const param = {
					productUpId: productId,
					userId,
					number,
					productSpecsId: product_id
				}
				this.btnType = 1
				console.log(type, 'type')
				if (type != 2) {
					//平台加入购物车
					console.log(type, '平台加入购物车')

					this.$request.miniAdd2ShoppingCar(param).then(res => {
						console.log(res)
						if (res.msg == '成功') {
							this.$toast('已加入购物车')
						} else {
							this.$toast(res.msg)

						}
						this.visible = false
					})
				} else {
					const storeGoods = uni.getStorageSync('storeGoods') || [];
					const storeDTO = uni.getStorageSync('storeDTO') || ''; //社区店ID
					let isTrue = true;
					storeGoods.map(item => {
						if (item.id !== details.id && storeDTO.storeId != storeId) {
							this.$toast('当前门店暂无此商品')
							isTrue = false;
						}
					});
					if (isTrue) {
						param.showPrice = details.showPrice;
						param.thumbnail = details.productSpecsDTOList[product_index].specsImages;
						param.name = details.name;
						param.id = details.id;
						param.showPrice = details.productSpecsDTOList[product_index].showPrice;
						param.product_id = product_id;
						param.productName = selectedAttrStr;
						let cartList = uni.getStorageSync('cartList') || [];
						if (cartList.length == 0) {
							cartList.push(param);
						} else {
							cartList.map(ite => {
								if (ite.id == param.id && ite.product_id == param.product_id) {
									ite.number += param.number;
								} else {
									cartList.push(param);
								}
							});
						};
						uni.setStorageSync('cartList', cartList);
						this.$toast('已加入购物车')
						this.visible = false
						this.product_id = -1
					}
				}
			},
			buyItNow1() {
				const {
					details,
					product_index
				} = this;
				this.visible = true
				this.btnType = 2
				this.selectedAttrStr = details.productSpecsDTOList[product_index]?.name || ''
			},
			onCheckProduct(item, index) {
				this.product_id = item.productSpecsId
				this.selectedAttrStr = item.name
				this.product_index = index
			},

			cartChange(type) {
				let {
					number
				} = this;
				let num = number;
				if (type == 'minus') {
					if (num > 1) {
						num--;
					}
				} else {
					num++
				}
				this.number = num
			},
			//立即购买
			buyItNow(msg) {
				const {
					product_id,
					product_index,
					number,
					details
				} = this;
				this.btnType = 2

				if (details.status == 0) {
					this.$toast('商品已下架')
				} else {
					let totalAmount = Number(details.productSpecsDTOList[product_index].showPrice) * number;
					const param = {
						number,
						retailPrice: details.productSpecsDTOList[product_index].showPrice,
						productSpecsId: product_id,
						id: details.id,
						thumbnail: details.productSpecsDTOList[product_index].specsImages,
						name: details.name
					};
					let str = encodeURIComponent(JSON.stringify([param]));
					this.$goPath(2,
						`/pages/premiumBag/goods/confirmOrder?message=${msg}&checkedList=${str}&totalAmount=${totalAmount}`)
				}
			},
			/** 跳转到评价列表 */
			navToCommentsListPage() {
				this.$goPath(2, `/pages/premiumBag/goods/evaluate?productUpId=${this.productId}`)
			},
			// 收藏购物车逻辑
			toNav(item) {
				const {
					userId,
					details,
					productId
				} = this;
				const param = {
					productUpId: productId,
					userId
				}
				if (item.title == '购物车') {
					console.log('2132', item.url)
					this.$goPath(2, item.url)
				} else {
					if (details.collect == 0 || details.collect == null) {
						this.$request.miniAddCollet(param).then(res => {
							if (res.code == 200) {
								this.$toast('收藏成功!')
							}
						});
					} else {
						this.$request.miniCancelCollet(param).then(res => {
							if (res.code == 200) {
								this.$toast('取消收藏成功!')
							}
						});
					}
					setTimeout(() => {
						this.getDetail();
					}, 300)
				}
			},
		},
	}
</script>
<style scoped>
	.goods-detail-page {
		width: 100%;
		height: 100%;
		overflow: scroll;
	}

	.goods-detail-page::-webkit-scrollbar {
		width: 0;
	}

	.goods-detail-page .goods-info {
		margin: 0 auto;
		padding: 26rpx 0 28rpx 30rpx;
		background-color: #fff;
	}

	.goods-detail-page .swipe-img {
		width: 100%;
		height: 750rpx;
	}

	.goods-detail-page .goods-info .goods-price {
		width: 100%;
		display: flex;
		align-items: center;
		color: #fa4126;
		font-size: 28rpx;
	}

	.show-price {
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.show-price view {
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		align-items: flex-end;
		margin-right: 8rpx;
	}

	.line-price text {
		text-decoration: line-through
	}

	.goods-detail-page .goods-info .goods-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-detail-page .goods-info .goods-title .goods-name {
		width: 600rpx;
		font-weight: 500;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 32rpx;
		word-break: break-all;
		color: #333333;
	}

	.goods-detail-page .goods-info .goods-intro {
		font-size: 26rpx;
		color: #888;
		line-height: 36rpx;
		word-break: break-all;
		padding-right: 30rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
		overflow: hidden;
	}

	.spu-select {
		height: 80rpx;
		background-color: #fff;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		padding: 30rpx;
		font-size: 28rpx;
	}

	.spu-select .label {
		margin-right: 30rpx;
		text-align: center;
		flex-shrink: 0;
		color: #999999;
		font-weight: normal;
	}

	.spu-select .content {
		display: flex;
		flex: 1;
		justify-content: space-between;
		align-items: center;
	}

	.spu-select .content .tintColor {
		color: #aaa;
	}

	.goods-detail-page .desc-content {
		background-color: #fff;
		padding-bottom: 160rpx;
	}

	.goods-detail-page .desc-content__title {
		font-size: 28rpx;
		line-height: 36rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 20rpx;
	}

	.goods-detail-page .desc-content__title .img {
		width: 206rpx;
		height: 10rpx;
	}

	.goods-detail-page .desc-content__title--text {
		font-size: 26rpx;
		margin: 0 32rpx;
		font-weight: 600;
	}

	.goods-detail-page .desc-content__img {
		width: 100%;
		height: auto;
		display: block;
	}

	.goods-bottom-operation {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.bottom-operate {
		width: 100%;
		padding: 24rpx;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(51, 51, 51, 0.1);
	}

	.bottom-operate,
	.icon-warp {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.icon-warp {
		width: 100rpx;
		flex-direction: column;
		color: #999999;
		font-size: 24rpx;
	}

	.operate-btns {
		flex: 1;
		height: 80rpx;
		margin-left: 24rpx;
		display: flex;
		background-color: #37B79B;
		border-radius: 40rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.bar-separately,
	.bar-buy {
		width: 240rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bar-separately {
		border-right: 1rpx solid #fff;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	.bar-buy {
		padding-right: 15rpx;
		box-sizing: border-box;
	}

	.operate-separately {
		width: 550rpx;
		height: 80rpx;
		background: #37B79B;
		color: #fff;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods-detail-page .goods-head {
		--td-swiper-radius: 0;
	}

	.t-toast__content {
		z-index: 12000 !important;
	}

	.comments-wrap {
		margin-top: 20rpx;
		padding: 32rpx;
		background-color: #F6F6F6;
	}

	.comments-wrap .comments-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.comments-wrap .comments-head .comments-title-wrap {
		display: flex;
	}

	.comments-title-label,
	.comments-title-count {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 48rpx;
	}

	.comments-rate-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.comment-item-wrap .comment-item-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 32rpx;
	}

	.comment-item-wrap .comment-item-head .comment-item-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 64rpx;
	}

	.comment-item-wrap .comment-item-head .comment-head-right {
		margin-left: 24rpx;
	}

	.comment-head-right .comment-username {
		font-size: 26rpx;
		color: #333333;
		line-height: 36rpx;
		font-weight: 400;
	}

	.comment-item-wrap .comment-content {
		margin-top: 20rpx;
		color: #666666;
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.popup-block {
		width: 100vw;
		height: 600rpx;
		background: #fff;
		border-radius: 32rpx 32rpx 0 0 !important;
		position: relative;
		padding-bottom: 80rpx;
		display: flex;
		flex-direction: column;
	}

	.popup-top {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 10rpx 24rpx 0;
	}

	.popup-section {
		padding: 0 24rpx;
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: auto;
	}

	.popup-top_img {
		display: flex;
		align-items: flex-end;
	}

	.popup-top_img>view:first-child {
		width: 128rpx;
		height: 128rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 20rpx;
	}

	.popup-top_img image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.popup-top_img_price {
		color: #EA5F5F;
		font-size: 28rpx;
	}

	.popup-top_img_price text {
		font-size: 48rpx;
		font-weight: bold;
	}

	.popup-section_specs {
		width: 100%;
		flex: 1;
		overflow: auto;
		margin-top: 30rpx;
	}

	.popup-section_specs::-webkit-scrollbar {
		width: 0;
	}

	.popup-section_specs_title {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 24rpx;
	}

	.popup-section_specs_items {
		flex: 1;
		overflow: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.popup-section_specs_item {
		width: max-content;
		height: 56rpx;
		margin-right: 24rpx;
		background-clip: content-box;
		color: #666;
		font-size: 28rpx;
		line-height: 96rpx;
		margin-bottom: 32rpx;
		border-radius: 16rpx 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		white-space: nowrap;
		word-break: keep-all;
		text-overflow: ellipsis;
		padding: 0 24rpx;
		box-sizing: border-box;
		/* background-color: #F8F8F8; */
	}

	.noStock {
		color: #999;
	}

	.noStock>text {
		color: #EA5F5F;
		margin-left: 12rpx;
	}

	.popup-section_specs_item:last-child {
		margin-right: 0;
	}

	.specs_actived {
		border: 2rpx solid #32B499;
		background-color: #fff;
		color: #32B499;
	}

	.popup-btns {
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup_container-btn {
		width: 600rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		box-sizing: border-box;
		color: #fff;
		border-radius: 40rpx;
		background-color: #37B79B;
	}

	.popup_container-btn>view {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.popup_container-btn>.add-cart {
		border-right: 1rpx solid #fff;
	}

	.store_popup_container-btn {
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.store_popup_container-btn>.storeBtn {
		width: 600rpx;
		height: 66rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 60rpx 60rpx;
		background-color: #32B499;
	}

	.popup-section_specs_number {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 24rpx;
		color: #333;
	}

	.popup-section_specs_number>view {
		display: flex;
		align-items: center;
	}

	.algorithm {
		width: 190rpx;
		height: 50rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #999999;
		margin-left: 24rpx;
	}

	.algorithm>view {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.algorithm>view:first-child,
	.algorithm>view:last-child {
		width: 50rpx;
	}

	.algorithm>view:nth-child(2) {
		flex: 1;
		border-left: 1rpx solid #999999;
		border-right: 1rpx solid #999999;
	}
</style>